<template>
	<view class="box">
		<view class="list" v-if="list.length">
			<view class="card" v-for="(item,index) of list" :key="index" @click="goDetail(item.id)">
				<view class="one flex">
					<view class="img f-w">
						<image src="https://jw.xzsw2021.com/static/user/icon_242@2x.png" mode=""></image>
					</view>
					<view class="right f30 bold">{{item.comment}}</view>
				</view>
				<view class="two f-w">
					<view class="img f-w">
						<image src="https://jw.xzsw2021.com/static/user/icon_243@2x.png" mode=""></image>
					</view>
					<view class="right f26 hide-line">{{item.answer.count?item.answer.list[0].comment:'暂无回答，答友们正在飞速赶来~'}}</view>
				</view>
				<view class="three f-w" v-if="item.answer.count">
					<view class="img">
						
					</view>
					<view class="right f-w">
						<view class="imgs">
							<image :src="item.answer.list[0].avatar"></image>
							<image :src="item.answer.list[1].avatar" v-if="item.answer.list[1].avatar"></image>
							<image :src="item.answer.list[2].avatar" v-if="item.answer.list[2].avatar"></image>
						</view>
						<view class="f22 c999">{{item.answer.list[0].nickname}}<block v-if="item.answer.count>1"> 等{{item.answer.count}}人</block> 进行了回答</view>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="nomore" v-else>暂无问答~</view>
		<view class="bottom">
			<view class="fw-bt">
				<view class="input f-w">
					<input type="text" v-model="content" placeholder="说说您的困惑" />
				</view>
				<view class="upload" @click="goUpload">
					<image src="https://jw.xzsw2021.com/static/user/icon_244@2x.png" mode=""></image>
				</view>
				<view class="wenwen" @click="submit">问问大家</view>
			</view>
			<!-- 图片数组 -->
			<view class="bimgs flex" v-if="img_list">
				<view class="bimg f-w" v-for="(item,index) of img_list" :key="index" >
					<image :src="item.path" mode="aspectFit"></image>
					<view class="close f-w" @click.stop="del(index)">
						<image src="https://jw.xzsw2021.com/static/client/icon_95@2x.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			     list:[],
				img_list:[],//待上传图片列表
				aa:'120rpx',
				length:2,//允许上传图片数量
				showAdd:true,//是否显示上传按钮
				content:'',//评论文字
				id:''
			}
			// pages/user/banquest/wenda/wenda/
		},
		onLoad(e) {
			this.id=e.id
		},
		onShow() {
			this.getlist()
		},
		methods: {
			// 获取问答列表
			getlist(){
				this.$request('store/product/question/answer/'+this.id,{},'GET').then(res=>{
					 this.list=res.data  
				})
				
			},
			
			
			// 问答详情
			goDetail(id){
				uni.navigateTo({
					url:'/pages/user/banquest/wenda/wenda2?goodsid='+this.id+'&pjid='+id
				})
			},
			// 动态获取底部高度
			getHeight(){
				let _this=this;
				let info = uni.createSelectorQuery().select(".bottom");
				info.boundingClientRect(function(data) { //data - 各种参数
					console.log(data.height)  // 获取元素高度
					_this.aa=data.height+'px'
				}).exec()
			},
			// 上传
			goUpload(){
				
					this.$uploadImg(this.img_list,this.showAdd,this.length);
			
			},
			// 删除当前图片
			del(index){
				this.img_list.splice(index,1);
				if(this.img_list.length<this.length){
					this.showAdd=true;
				}
				console.log('删除',index);
			},
			// 图片预览
			preImg(url){
				let imgs=[];
				this.img_list.map(item=>{
					imgs.push(item.path)
				})
				uni.previewImage({
					current:url,
					urls:imgs,
					success(res) {
						
					},
					fail(err){
						console.log(err);
					}
				})
			},
			// 提交
			submit(){
				if(!this.content.trim()){
					this.$showToast('请输入评论内容');
					return false;
				}
				if(this.img_list.length){
					let arr=[];
					this.img_list.map(item=>{
						arr.push(item.id);
					})
					arr=arr.join();
					console.log(arr);
				}
				let arr=[]
				this.img_list.forEach(item=>{
					arr.push(item.path)
				})
				let data={
					product_id:this.id,
					comment:this.content,
					pics:arr
				}
				uni.showLoading({
					mask:true
				})
				this.$request('store/product/question/create',data).then(res=>{
					if(res.status==200){
						this.$showToast('提交成功');
						this.getlist()
						this.content=''
						this.img_list=[]
					}
				})
				
		
			}
		}
	}
</script>
<style>
	page{
		background-color: #F5F5F5;
	}
	.nomore{
		    font-size: 28rpx;
		    color: #333;
			width: 100%;
			text-align: center;
			padding-top: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.box{
		.list{
			overflow: hidden;
			.card{
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 20rpx 0;
				padding: 20rpx 30rpx;
				.img{
					width: 40rpx;
					height: 40rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.right{
					flex: 1;
					margin-left: 15rpx;
					.imgs{
						margin-right: 10rpx;
						image{
							width: 38rpx;
							height: 38rpx;
							border-radius: 50%;
						}
					}
					.imgs>image:not(:first-child){
						margin-left: -10rpx;
					}
				}
				.two{
					margin-top: 30rpx;
				}
				.three{
					margin-top: 26rpx;
				}
			}
		}
		.bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			min-height: 120rpx;
			padding: 25rpx 30rpx;
			background: #FFFFFF;
			z-index: 11;
			box-sizing: border-box;
			.input{
				width: 430rpx;
				height: 70rpx;
				padding-left: 30rpx;
				font-size: 26rpx;
				background: #F6F6F6;
				border-radius: 35rpx;
				box-sizing: border-box;
				input{
					width: 380rpx;
				}
			}
			.upload{
				width: 49rpx;
				height: 43rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.wenwen{
				width: 160rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 26rpx;
				color: #fff;
				background: linear-gradient(64deg, #2BCCA5, #22B591);
				box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(20, 187, 146, 0.4);
				border-radius: 35rpx;
			}
			.bimgs{
				flex-wrap: wrap;
				.bimg{
					position: relative;
					flex-shrink: 0;
					margin-top: 16rpx;
					width:160rpx;
					height: 160rpx;
					background-color: #F0F0F0;
					image{
						width: 100%;
						height: 100%;
					}
					.close{
						position: absolute;
						top: 0;
						right: 0;
						width: 40rpx;
						height: 30rpx;
						z-index: 5;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
				&>view:not(:nth-child(4n)){
					margin-right: 16rpx;
				}
			}
		}
	}
</style>
